<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台登录-X-admin2.0</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="./lib/layui/css/layui.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="big-cusbox">
    <div class="x-body" style="padding-left: 0px">
        <div class="customer-box intentionalCustomer cus1">
            <ul>
                <li>本月新增意向客户</li>
                <li>30</li>
                <li>今日新增 <span>5</span> </li>
            </ul>
        </div>
        <div class="customer-box intentionalCustomer cus2">
            <ul>
                <li>本月新签客户</li>
                <li>30</li>
            </ul>
        </div>
        <div class="customer-box intentionalCustomer cus3">
            <ul>
                <li>未联络客户 <img src="images/选项.png" alt="" class="setting "> </li>
                <li>30</li>
            </ul>
        </div>
        <div class="clear"></div>
</div>
<!--<div class="setting-content">-->
    <!--<form action="">-->
        <!--<div><span>设置我想要看到的数据</span> <input type="checkbox" id="btn-q" value="全选">全选 </div>-->
        <!--<br>-->
        <!--<input type="checkbox" name="checkbox" value="checkbox1" class="set-che">-->
        <!--7天未联络客户-->
        <!--<br>-->
        <!--<input type="checkbox" name="checkbox" value="checkbox2" class="set-che">-->
       <!--14天未联络客户-->
        <!--<br>-->
        <!--<input type="checkbox" name="checkbox" value="checkbox3" class="set-che">-->
        <!--30天未联络客户-->
    <!--</form>-->
<!--</div>-->
<div class="zx">
    <iframe src='./echarts1.html' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
</div>

</div>
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/echarts.min.js" charset="utf-8"></script>

<script>

    $(".customer-box").click(function () {
        var isReturn = false;
        var a=$(this).index();
        $(this).animate({width:'42%'},500);
        $(this).siblings() .animate({width:'20%'},500);
//        延迟执行，不然会有卡顿
        isReturn = true;
        setTimeout(function(){

            if(isReturn == true){

                abc(a);
            }
        },500)
    })
function abc(a) {
    switch(a)
    {
        case 0:
            $(".x-iframe").attr("src","./echarts1.html");
            break;
        case 1:
            $(".x-iframe").attr("src","./echarts2.html");
            break;
        case 2:
            $(".x-iframe").attr("src","./echarts3.html");
            break;
    }
}


    //设置弹窗
$(".setting").on("click",function () {
    layui.use('layer', function(){
        var layer = layui.layer;

        layer.open({
            type:1,
            title:'未联络客户',
            area: ['280px']
            ,
            content:'<div class="setting-content">\n' +
            '    <form action="">\n' +
            '        <div><span>设置我想要看到的数据</span> <input type="checkbox" id="btn-q" value="全选" onclick="che()" >全选 </div>\n' +
            '        <br>\n' +
            '        <input type="checkbox" name="checkbox" value="checkbox1" class="set-che">\n' +
            '        7天未联络客户\n' +
            '        <br>\n' +
            '        <input type="checkbox" name="checkbox" value="checkbox2" class="set-che">\n' +
            '       14天未联络客户\n' +
            '        <br>\n' +
            '        <input type="checkbox" name="checkbox" value="checkbox3" class="set-che">\n' +
            '        30天未联络客户\n' +
            '    </form>\n' +
            '</div> ',
            btn: ['保存', '取消']
            ,btnAlign: 'c'
            ,shade: 0
            ,yes: function(){
//                选择客户天数保存后的函数
            }
            ,btn2: function(){
                layer.closeAll();
            }


        })

    });
})

function che() {
        if(!$("#btn-q").is(':checked')){
            $("input[name='checkbox']").removeAttr("checked");
        }else {
            $("input[name='checkbox']").attr("checked","true");
        }
}

</script>

</body>
</html>